<template>
  <div class="outer-input" :style="{width:`${width}%`}">
    <div class="title">
        <span class="need" v-if="struc?.must">*</span>
        <span>{{ struc?.viewName }}</span>
    </div>
    <div class="contextPackage">
      <el-select v-model="showTypeName" class="m-2" placeholder="选择" ref="selectRefType">
        <el-option
          style="height:300px; overflow-y:scroll"
          :value="123"
          label="测试"
        >
          <el-tree
              default-expand-all
              :props="defaultProps"
              :data="treeData"
              @node-click="handleNode"
              >
              </el-tree>
        </el-option>
      </el-select>
      <span class="errorhint" v-if="showError">
        {{ struc?.errorHit }}
      </span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, PropType, ref, reactive, computed, toRefs } from "vue";
import useDataCheck, { DataStruc } from "../../hook/datastruc";
import useRequet, { RespData } from "../../hook/network"
import { ElMessage } from 'element-plus'

export default defineComponent({
  type: 108,
  name: "FilterTree",
  props: {
    struc: {
      type: Object as PropType<DataStruc>,
    },
    passWidth: {
			type: Number
		}
  },
  setup: (props, context) => {
    let showError = ref(false);
    const request = useRequet({ path: "" });
    let valueInput: DataStruc = reactive(props.struc as DataStruc);
    const dataCheck = useDataCheck();
    let check = () => {
      if (valueInput.value) {
        showError.value = false;
  		} else {
        console.debug("检查出错：", showError);
        showError.value = true;
			}
			
      return !showError.value;
    };

    const defaultProps = {
      children: 'children',
      label: 'name',
      isLeaf: 'leaf'
    }
    const selectRefType = ref()
    const tree = reactive({
      treeData: [],
      showTypeName: '',
      fullData: []
    })
    const getTreeList = () => {
      request.sendRequest({
        address: 'warehouse/good/getTypeTree',
        params: {},
        success: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取物品分类树形图失败')
          console.log(resp.data)
          tree.treeData = resp.data
          let filterObject = filterData(tree.treeData, valueInput.value)
          console.log(filterObject, valueInput.value)
          tree.showTypeName = filterObject.name
        },
        fail: (resp: RespData) => {
          if(resp.code !== 0) return ElMessage.error(resp.msg || '获取物品分类树形图失败')
          
        },
        method: "GET",
      })
    }
    getTreeList()

    const filterData = (data:any, id:number) => {
      let res = data.find((item:any) => item.id == id)
      if(res) {
        return res
      } else {
        for(let i = 0; i < data.length; i++) {
          if(data[i].children instanceof Array && data[i].children.length > 0) {
            res = filterData(data[i].children, id)
            if(res) {
              return res
            }
          }
        }

        return null
      }

    }

    const handleNode = (data: any) => {
      console.log(data)
      tree.showTypeName = data.name;
      valueInput.value = data.id;
      console.log(valueInput.value)
      console.log(selectRefType.value)
      selectRefType.value.blur()
    }
    const width = computed(() => props.passWidth)

    onMounted(() => {
      dataCheck.addDataCheck(check);
    });

    return { 
      showError, 
      check, 
      valueInput, 
      width, 
      defaultProps,
      ...toRefs(tree),
      handleNode,
      selectRefType
      };
  },
  methods: {
    out(event: MouseEvent) {
      console.log("wos失去焦点");
      if(!this.valueInput.must) {
					this.showError = false;
				} else {
					this.check()
				}
    },
  },
});
</script>

<style scoped lang="scss">
@import '@style/extend';
.outer {
  display: flex;
  margin-bottom: 20px;
  width: 33.333%;
  padding-right: 10px;
  box-sizing: border-box;
  .title {
    height: 40px;
    line-height: 40px;
    flex: 0 0 auto;
    padding-right: 10px;
    // font-size:$fontSize;
    font-size: $fontSize-1;
    color: $regularText;
    .need {
      color: red;
    }
  }
  .contextPackage {
    flex: 1;
    position: relative;
    line-height: 40px;

    .errorhint {
      @extend .error;
      position: absolute;
      height: 10px;
      line-height: 1;
      // top: 100%;
      display: block;
    }
    .notShow {
      display: none;
    }
  }

}

</style>
